<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>九宫格</title>
		<style type="text/css">
			html {
				height: 100%;
			}
			
			body {
				margin: 0;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			div {
				width: 80px;
				height: 80px;
				background-color: red;
				position: absolute;
				text-align: center;
				line-height: 80px;
			}
			
			main {
				background-color: orange;
				width: 270px;
				height: 270px;
				position: relative;
			}
		</style>
	</head>

	<body>
		<main></main>

		<script type="text/javascript">
		
		
			function myCreat9Div() {

				var main = document.querySelector('main');

				for (var i = 0; i < 3; i++) {

					for (var k = 0; k < 3; k++) {

						console.log('xxxxxxx')

						var div = document.createElement('div')

						div.style.left = 5 + (80 + 10) * i + 'px';

						div.style.top = 5 + (80 + 10) * k + 'px';

						div.innerHTML = k * 3 + i + 1;

						main.appendChild(div);
					}

				}
			}
			
			myCreat9Div();
		</script>
	</body>

</html>